<template>
  <div class="birds">
    <van-grid :border="false" :column-num="3">
      <van-grid-item v-for="(item, index) in birds" :key="index">
        <van-image :src="item.img" @click="onClickImg(item)">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onBeforeMount } from '@vue/runtime-core';
export default {
  props: ['birds'],
  setup(props) {
    const state = reactive({});
    onBeforeMount(() => {
      console.log(props.birds);
    });
    const onClickImg = (item) => {
      console.log(item);
    };
    return { ...toRefs(state), onClickImg };
  },
};
</script>
<style lang="less" scoped>
.birds {
  width: 95%;
  margin: 0 auto;

  .imgBox {
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
